<template>
    <base-panel>
        <top-simple-search @addFun="toAdd" @searchFun="toSearch" ></top-simple-search>
        <simple-table ref="myTable">
            <el-table-column align="left" prop="name" label="栏目名称"/>
            <el-table-column align="left" prop="client" label="显示终端" width="120" :formatter="clientFormatter"/>
<!--            <el-table-column align="left" prop="no_order" label="排序" width="120"/>-->
            <el-table-column align="left" prop="status" label="状态" width="120" :formatter="statusFormatter"/>
            <el-table-column align="left" label="操作" width="200">
                <template slot-scope="{row}">
                    <detail-button @click="toDetail(row)"></detail-button>
                    <edit-button @click="toEdit(row)"></edit-button>
                    <delete-button @click="toDelete(row.id)"></delete-button>
                </template>
            </el-table-column>
        </simple-table>
        <detail-dialog :visible.sync="visible" v-if="visible" @reloadList="getList" :row="currRow" :disabled="disabled" :parentList="list"></detail-dialog>
    </base-panel>

</template>
<script>
    import DetailDialog from "./DetailDialog";
    import simpleTable from "@/mixins/SimpleTable";
    import XEUtils from "xe-utils";
    export default {
        mixins:[simpleTable],
        components: {DetailDialog},
        data(){
            return{
                listVisible:false,
                list:[]
            }
        },
        methods:{
            clientFormatter(row){
                return row.client?"手机":"PC"
            },
            statusFormatter(row){
                return row.status?"启用":"禁用"
            },
            toSearch(params){
                this.getList(params)
            },
            dataFormatter(data){
                this.list = XEUtils.toArrayTree(data, {
                    parentKey: 'parent',
                    key: 'id',
                    children: 'children'
                });
                return this.list
            },
        }
    }
</script>
